<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head lang="zh-CN">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用户资料完善</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link href="${basePath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<style type="text/css">
		.round {
		   padding:10px; width:300px; height:50px;
		   border: 0px solid #dedede;
		   -moz-border-radius: 5px;      /* Gecko browsers */
		   -webkit-border-radius: 5px;   /* Webkit browsers */
		   border-radius:5px;            /* W3C syntax */
		}
		#imghead2{
    		width:50px;
	        height:50px;
	        border-radius:200px;
    	}
    	.loadingWrap{
		    position:fixed;
		    top:0;
		    left:0;
		    width:100%;
		    height:100%;
		    z-index:300;
		    background-image:url(csh/image/loading.gif);
		    background-repeat:no-repeat;
		    background-position:center center;
		    background-color:#000;
		    background-color:rgba(0,0,0,0.5);
		    filter:alpha(opacity=50);
		}
	</style>
	<script type="text/javascript" src="jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="layer/2.4/layer.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			var access_token=document.getElementById("access_token").value;
			$.ajax({
				url:"https://oauth2czy.colourlife.com/oauth/user/info",
				data:{
					access_token:access_token
				},
				success:function(data){
					document.getElementById("idtable").style.display="block";
					document.getElementById("nickname").value=data.content.nickname;
					document.getElementById("mobile").value=data.content.mobile;
					document.getElementById("community_name").value=data.content.community_name;
					document.getElementById("openid").value=data.content.openid;
				}
			});
		});
	</script>
	<script type="text/javascript">
		function face(){
			window.location.href="${basePath}/csh/face.jsp";
		}
		function userInformation(){
			var file=document.getElementById("filepath1").value;
			if(file==""){
				alert("图片上传不能为空");
			}else{
				document.getElementById("1").style.display="block";
				document.getElementById("button").style.display="none";
				$("#form").submit();
			}
		}
		//人脸检测图片上传预览1
         function previewImage1(file){
         	var files = $("#filepath1").prop("files");
         	var formData =new FormData();
         	formData.append("file",files[0]);
         	var filepath1=document.getElementById('filepath1').value;			//获取文件路径
         	var newfilepath1 =filepath1.substring(filepath1.lastIndexOf('.'));
         	var jpg='.jpg',png='.png',jpeg='.jpeg',gif='.gif';
         	if(jpg == newfilepath1 || png==newfilepath1 || jpeg == newfilepath1 || gif==newfilepath1){
         		$.ajax({
  					url:"${basePath}/face/detection",
  					fileElementId:"filepath1",
  					data:formData,
  					type:"post",
  					async:true,
  					processData:false,
  					contentType:false,
  					beforeSend:function(XMLHttpRequest){
  						document.getElementById("1").style.display="block";
  						document.getElementById("button").style.display="none";
	  				},
  					success:function(date){
  					document.getElementById("1").style.display="none";
  					document.getElementById("button").style.display="block";
  					console.log(date);
  					var s=JSON.parse(date);
  					console.log(s);
  					if(s=="413"){
  						alert("图片超出2BM");
  						document.getElementById('filepath1').value="";	//清除图片路径 */
  						var img=document.getElementById("imghead1");
  						img.src="${basePath}/csh/image/owner.jpg";
  						img.style.height="150px";
  						img.style.width="80%";
  					}else if(s=="0"){
  						alert("图片异常,请重试");
  						document.getElementById('filepath1').value="";	//清除图片路径 */
  						var img=document.getElementById("imghead1");
  						img.src="${basePath}/csh/image/owner.jpg";
  						img.style.height="150px";
  						img.style.width="80%";
  					}else if(s.error_message=="IMAGE_ERROR_UNSUPPORTED_FORMAT: image_file"){
  						alert("图像无法正确解析，有可能不是一个图像文件、或有数据破损、或图片文件格式不符合要求");
  						document.getElementById('filepath1').value="";	//清除图片路径 */
  						var img=document.getElementById("imghead1");
  						img.src="${basePath}/csh/image/owner.jpg";
  						img.style.height="150px";
  						img.style.width="80%";
  					}else if(s.error_message=="INVALID_IMAGE_SIZE: image_file"){
  						alert("图片尺寸错误,图片太大或太小");
  						document.getElementById('filepath1').value="";	//清除图片路径 */
  						var img=document.getElementById("imghead1");
  						img.src="${basePath}/csh/image/owner.jpg";
  						img.style.height="150px";
  						img.style.width="80%";
  					}else if(s.error_message=="INVALID_IMAGE_URL"){
  						alert("无法从指定的路径下载图片，图片路径错误或者无效");
  						document.getElementById('filepath1').value="";	//清除图片路径 */
  						var img=document.getElementById("imghead1");
  						img.src="${basePath}/csh/image/owner.jpg";
  						img.style.height="150px";
  						img.style.width="80%";
  					}else if(s.error_message=="IMAGE_FILE_TOO_LARGE: image_file"){
  						alert("图片文件过大,请将图片文件大小控制在 2MB 内");
  						document.getElementById('filepath1').value="";	//清除图片路径 */
  						var img=document.getElementById("imghead1");
  						img.src="${basePath}/csh/image/owner.jpg";
  						img.style.height="150px";
  						img.style.width="80%";
  					}else if(s.error_message=="IMAGE_DOWNLOAD_TIMEOUT"){
  						alert("下载图片超时");
  						document.getElementById('filepath1').value="";	//清除图片路径 */
  						var img=document.getElementById("imghead1");
  						img.src="${basePath}/csh/image/owner.jpg";
  						img.style.height="150px";
  						img.style.width="80%";
  					}else if(s.error_message=="CONCURRENCY_LIMIT_EXCEEDED"){
  						alert("并发数超过限制,请稍后重试");
  						document.getElementById('filepath1').value="";	//清除图片路径 */
  						var img=document.getElementById("imghead1");
  						img.src="${basePath}/csh/image/owner.jpg";
  						img.style.height="150px";
  						img.style.width="80%";
  					}else if(s.error_message=="INTERNAL_ERROR"){
  						alert("服务器内部错误");
  						document.getElementById('filepath1').value="";	//清除图片路径 */
  						var img=document.getElementById("imghead1");
  						img.src="${basePath}/csh/image/owner.jpg";
  						img.style.height="150px";
  						img.style.width="80%";
  					}else if(s.faces.length == 0 ){
  						alert("未检测到人脸,请重新选择一张图片,并确保人脸正对画面");
  						document.getElementById('filepath1').value="";	//清除图片路径 */
  						var img=document.getElementById("imghead1");
  						img.src="${basePath}/csh/image/owner.jpg";
  						img.style.height="150px";
  						img.style.width="80%";
  					}else if(s.faces.length>1){
  						alert("图片中不能超过两张头像");
  						document.getElementById('filepath1').value="";	//清除图片路径 */
  						var img=document.getElementById("imghead1");
  						img.src="${basePath}/csh/image/owner.jpg";
  						img.style.height="150px";
  						img.style.width="80%";
  					}else if(s.faces.length == 1){
  						console.log(s.faces[0].face_rectangle.height+"\t"+s.faces[0].face_rectangle.top+"\t"+s.faces[0].face_rectangle.left+"\t"+s.faces[0].face_rectangle.width);
			          	var div = document.getElementById('preview1');
			          	if (file.files && file.files[0]){
				            div.innerHTML ='<img id=imghead1>';
				            var img = document.getElementById('imghead1');
				            img.onload = function(){
			                  var rect = clacImgZoomParam(150, 150, img.offsetWidth, img.offsetHeight);
				              img.width  =  rect.width;
				              img.height =  rect.height;
				              img.style.marginTop = rect.top+'px';
			           	};
				            var reader = new FileReader();
				            reader.onload = function(evt){
				            img.src = evt.target.result;
				        };
				            reader.readAsDataURL(file.files[0]);
			          	}else{//兼容IE

				            file.select();
				            var src = document.selection.createRange().text;
				            div.innerHTML = '<img id=imghead>';
				            var img = document.getElementById('imghead');
				            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
				            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
				            status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
				            div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
			          	}
  					}
  					},
  					error:function(date){
  					alert("图片异常");
  					document.getElementById('filepath1').value="";
	         		var img=document.getElementById("imghead1");
					img.src="${basePath}/csh/image/owner.jpg";
					img.style.height="150px";
					img.style.width="80%";
  				}
  			});
         	}else{
         		alert("不是图片");
         		document.getElementById('filepath1').value="";
         		var img=document.getElementById("imghead1");
				img.src="${basePath}/csh/image/owner.jpg";
				img.style.height="150px";
				img.style.width="80%";
         	}
        }
		function clacImgZoomParam( maxWidth, maxHeight, width, height ){
            var param = {top:0, left:0, width:width, height:height};
            if( width>maxWidth || height>maxHeight ){
                rateWidth = width / maxWidth;
                rateHeight = height / maxHeight;
                if( rateWidth > rateHeight ){
                    param.width =  maxWidth;
                    param.height = Math.round(height / rateWidth);
                }else{
                    param.width = Math.round(width / rateHeight);
                    param.height = maxHeight;
                }
            }
            param.left = Math.round((maxWidth - param.width) / 2);
            param.top = Math.round((maxHeight - param.height) / 2);
            return param;
        }
	</script>
  </head>
  <body id="idtable" style="display: none;">
  	<div class="container-fluid">
      <div class="row">
      <form id="form" action="${basePath}/user/information" method="post" enctype="multipart/form-data">
     	<table width="100%" height="100%">
     		<tr height="5%">
     			<td colspan="2" align="center"></td>
     		</tr>
     		<tr height="25%">
     			<td colspan="2" align="center">
     				<div style="text-align: center; padding-bottom: 18px;">
			    		<label>
			   		 		 <input type="file" name="filepath" id="filepath1"  value="" onchange="previewImage1(this)" style="display: none;" />
						     <div id="preview1">
							    <img id="imghead1" src="${basePath}/csh/image/owner.jpg" style="width: 80%;height: 150px;"/>
						    </div>
						</label>
    				</div>
     			</td>
     		</tr>
     		<tr height="10%">
     			<td colspan="2" align="center">
     				 <span id="1"  style="display: none;">
     				 	<img id="imghead2" src="http://wwl.ycws.cc/image/backgroundimage/2.gif" >
     				 </span>
     			</td>
     		</tr>
     		<tr height="5%">
     			<td style="width: 50px; background-color:#edeff0;" align="center"><img alt="" src="${basePath}/csh/image/e.jpg" style="width: 20px; height: 20px;"></td>
     			<td style="width: 900px; background-color:#edeff0; color: #7f8081;" align="left">请参照下列图片上传个人正面照</td>
     		</tr>
     		<tr height="30%">
     			<td colspan="2" align="center">
     				<img alt="" src="${basePath}/csh/image/girl.jpg" style="height: 130px; width: 170px;">&nbsp;<img alt="" src="${basePath}/csh/image/boy.jpg" style="height: 130px; width: 170px;">
     			</td>
     		</tr>
     		<tr height="20%">
     			<td colspan="2" align="center" style="background-color:white;">
     			<input type="button" value="确定" id="button" style="height: 50px;  width: 250px; background-color: #49a1f2; color: white; font-size: 16px;" class="round" onclick="userInformation()"/>
     			</td>
     		</tr>
     		<tr height="5%">
     			<td colspan="2" align="center"></td>
     		</tr>
     	</table>
	     	<input type="hidden" name="nickname" id="nickname" value=""><br>
	     	<input type="hidden" name="mobile" id="mobile" value=""><br>
	     	<input type="hidden" name="community_name" id="community_name" value=""><br>
	     	<input type="hidden" name="openid" id="openid" value=""><br>
	     	<input id="community_uuid" name="community_uuid" type="hidden" value="<%=request.getParameter("community_uuid")%>">
		</form>
			<input id="access_token" type="hidden" value="<%=request.getParameter("access_token")%>">
      </div>
    </div>
  </body>
</html>
